<template>
  <!-- <Search @search-params="onSearch"></Search> -->
  <ContentWrap>
    <div class="headBox">
      <a-button type="primary" size="large" @click="editColumn()">添加 + </a-button>
    </div>
    <a-table :loading="pageParams.loading" :columns="columns" :data-source="data" :pagination="false">
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'id'">
          <a-tag>{{ record.id }}</a-tag>
        </template>
        <template v-if="column.dataIndex === 'action'">
          <span>
            <a-button type="primary" @click="editColumn(record)">编辑</a-button>
            <a-divider type="vertical" />
            <a-popconfirm title="确认要删除吗？" ok-text="确认" cancel-text="取消" @confirm="deleteCategory(record)">
              <a-button type="danger">删除</a-button>
            </a-popconfirm>
          </span>
        </template>
      </template>
    </a-table>
    <a-pagination v-model:current="pageParams.page" v-model:pageSize="pageParams.size" :total="pageParams.total" />
  </ContentWrap>
  <EditVue v-if="showModel" :data="modelData" @finish="getListData()" v-model:show="showModel" />
</template>
<script setup lang="ts">
import { SmileOutlined, DownOutlined } from "@ant-design/icons-vue";
import Search from "./component/Search.vue";
import ContentWrap from "../../../components/ContentWrap/ContentWrap.vue";
import EditVue from "./component/Edit.vue";
import { onMounted, onUnmounted, reactive, ref, watch } from "vue";
import { Config, EventBus, Service } from "@/main";
import { TableProps } from "ant-design-vue";
import { showAlert } from "@/entity/helper/tips.helper";

const columns = [
  {
    title: "ID",
    dataIndex: "id",
  },
  {
    title: "分类名称",
    dataIndex: "name",
  },
  {
    title: "操作",
    dataIndex: "action",
  },
];
const pageParams = reactive({
  loading: false,
  size: 10,
  page: 1,
  total: 0,
});
const data = ref<Array<{ id: string; name: string }>>([]);
const getListData = () => {
  pageParams.loading = true;
  Service.Shop.getCategoryList(pageParams).then(res => {
    data.value = res.data;
    pageParams.loading = false;
    pageParams.total = res.total_recorl;
  });
};
const deleteCategory = (record: { id: string; name: string }) => {
  Service.Shop.deleteCategory(record.id).then(res => {
    getListData();
    showAlert("删除成功", "SUCCESS");
  });
};

getListData();
const showModel = ref(false);
const modelData = reactive({ id: "", name: "" });
const editColumn = (record: { id: string; name: string } = { id: "", name: "" }) => {
  console.log(record);
  modelData.id = record.id;
  modelData.name = record.name;
  showModel.value = true;
};
onMounted(() => {
  EventBus.on(Config.Event.refreshCategoryList, () => getListData());
});
onUnmounted(() => {
  EventBus.off(Config.Event.refreshCategoryList);
});
</script>
<style scoped>
.headBox {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-bottom: 10px;
}
</style>
